<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue的入门案例</title>
    <!-- 第一步:引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
   <!-- vue不能直接作用在body元素上 -->
<body>
      <!--div 指定vue的作用范围
      数据双向绑定:----数据代表视图数据view,模型数据model.双向概念如下:一方数据发生改变,会影响另一方数据;
      -->

  <div id="app">
      <!--
         watch(监控) 可以让我们监控一个值的变化,从而做出相应的反应.

         深度监控: 如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化.
       -->
      姓名：<input type="text" v-model="person.name"> <br>
      年龄：<input type="text" v-model="person.age"> <button @click="person.age++">+</button> <br>
      <h1>
          {{person.name}}今年{{person.age}}岁了。
      </h1>
          <!--  {{100+100}}======200-->
  </div>
</body>
<script>

    new Vue({
       el: "#app",  //指定vue作用的HTML元素  el:是element元素的意思.缩写.通过id选中要渲染的页面元素,本例是一个div
       data:{ //初始化vue模型数据,数据是一个对象,里面有很多属性,都可以渲染到视图中.
               person:{
                   name:"Jack",
                   age:21
               }
       },
        methods:{ //vue神=
       /*   add:function () {
              this.num++;
          }*/
        //可以简写,去掉function
           add(){
               this.age++;  //this就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue中定义的data内属性.方法等.
           }
        },
        watch:{//vue监控数据变化操作
            //指定监控的模型变量   针对简单数据类型进行数据变化监控  参数一：数据变化后的值，参数二：数据变化前的值
            /* name:function (newValue,oldValue) {
                 console.log(newValue+"----------"+oldValue);
             }*/
            /*name(newValue,oldValue) {
                console.log(newValue+"----------"+oldValue);
            }*/
           /* "user.name"(newValue,oldValue) {
                console.log(newValue+"----------"+oldValue);
            }*/
            //演示深度监控user对象变化
            user:{
                deep:true,// 开启深度监控，可以监控到对象中属性变化
                //参数是变化后的对象信息---handler处理者意思
                handler(val){//对象中属性变化后，处理方式
                    console.log(val.name);
                }
            }
        }
    });
</script>
</html>